<template>

      <div class="table">
      <el-form :model="dataForm" :rules="dataForm" ref="dataForm" >
        <div class="table_title td_color">借款信息</div>
        <table class="table_wrap">
          <tbody>
            <tr>
              <td class="table_td"><span class="td_check_red">*</span>资方</td>
              <td class="table_td">
                  <el-select v-model="dataForm.loanInfoVo.capitalId" @change="capitalChangeHandle" clearable placeholder="请选择" style="width:100%;">
                      <el-option
                        v-for="(item,index) in capitalList"
                        :key="index"
                        :label="item.capitalName"
                        :value="item.id"/>
                  </el-select>
              </td>
              <td class="table_td"><span class="td_check_red">*</span>产品名称</td>
              <td class="table_td">
                  <el-select v-model="dataForm.loanInfoVo.capitalSource" @change="capitalSourceChangeHandle" placeholder="请选择" style="width:100%;">
                      <el-option
                        v-for="(item,index) in chooseList"
                        :key="index"
                        :label="item.productName"
                        :value="item.id"/>
                  </el-select>
              </td>
            </tr>
            <tr>
              <td class="table_td">合同利率</td>
              <td class="table_td">
                <el-input placeholder="合同利率" v-model="dataForm.loanInfoVo.annualInterestRate" :disabled="true"/>
              </td>
              <td class="table_td"><span class="td_check_red">*</span>借款金额</td>
              <td class="table_td">
                <el-input type="text" placeholder="借款金额" v-model="dataForm.loanInfoVo.applyAmount" maxlength="6">
                  <template slot="append">万元</template>
                </el-input>
              </td>
            </tr>
            <!--借款人信息-->
              <tr><td class="table_title td_color" colspan="4">借款人信息</td></tr>
              <tr rowspan="4">
                <td class="table_td"><span class="td_check_red">*</span>证件号码：</td>
                <td class="table_td" colspan="3">
                  <el-input placeholder="请仔细输入证件号码，一旦提交便不可修改"  v-model="dataForm.borrowerVo.idCardNo" @blur="creditExistIdCardNoCheck" v-loading="loading" :disabled="idCardDisabled"/>
                </td>
              </tr>

              <tr>
                <td class="table_td"><span class="td_check_red">*</span>借款人</td>
                <td class="table_td"><el-input placeholder="借款人" v-model="dataForm.borrowerVo.realName" maxlength="10" show-word-limit/></td>

                <td class="table_td"><span class="td_check_red">*</span>手机号码</td>
                <td class="table_td"><el-input placeholder="手机号码" v-model="dataForm.borrowerVo.mobile"/></td>
              </tr>
            <tr>
              <td class="table_td"><span class="td_check_red">*</span>证件类型</td>
              <td class="table_td">
                <el-select v-model="dataForm.borrowerVo.idCardType" placeholder="请选择" style="width:100%;">
                  <el-option  label="身份证" :value="1"></el-option>
                </el-select>
              </td>

              <td class="table_td"><span class="td_check_red">*</span>证件号码</td>
              <td class="table_td">
                  <el-input placeholder="证件号码"  v-model="dataForm.borrowerVo.idCardNo" :disabled="true"/>
              </td>
            </tr>
            <tr>
              <td class="table_td">
                  <span class="td_check_red">*</span>户籍地址
              </td>
              <td class="table_td">
                <el-cascader v-model="famliyRegionCodes"
                  :options="regionList"
                  clearable
                  placeholder="请选择户籍地址"
                  :props="{ expandTrigger: 'hover' }"
                  style="width:100%;"
                ></el-cascader>
              </td>
              <td class="table_td">
                  <span class="td_check_red">*</span>详细地址
              </td>
              <td class="table_td">
                  <el-input placeholder="详细地址"  v-model="dataForm.borrowerVo.householdAddress" maxlength="30" show-word-limit/>
              </td>
            </tr>
            <tr>
              <td class="table_td">
                  <span class="td_check_red">*</span>最高学历
              </td>
              <td class="table_td">
                <DicSelect dictType = "最高学历" :dictValue="dataForm.borrowerVo.highestEducation" v-on:dictValue="dataForm.borrowerVo.highestEducation = $event"/>
              </td>
              <td class="table_td">
                  <span class="td_check_red">*</span>最高学位
              </td>
              <td class="table_td">
                  <DicSelect dictType = "最高学位" :dictValue="dataForm.borrowerVo.highestDegree" v-on:dictValue="dataForm.borrowerVo.highestDegree = $event"/>
              </td>
            </tr>
            <tr>
              <td class="table_td">
                  <span class="td_check_red">*</span>婚姻状况
              </td>
              <td class="table_td">
                <DicSelect dictType = "婚姻情况" :dictValue="dataForm.borrowerVo.marriageStatus" v-on:dictValue="dataForm.borrowerVo.marriageStatus = $event"/>
              </td>
              <td class="table_td">
                  <span class="td_check_red">*</span>电子邮箱
              </td>
              <td class="table_td">
                  <el-input placeholder="电子邮箱"  v-model="dataForm.borrowerVo.email"/>
              </td>
            </tr>
            <!--企业信息-->
            <tr><td class="table_title td_color" colspan="4">企业信息</td></tr>
            <tr>
              <td class="table_td"><span class="td_check_red">*</span>企业名称</td>
              <td class="table_td"><el-input placeholder="企业名称" v-model="dataForm.companyDTO.companyName" maxlength="40" show-word-limit/></td>

              <td class="table_td"><span class="td_check_red">*</span>社会信用代码</td>
              <td class="table_td"><el-input placeholder="社会信用代码" v-model="dataForm.companyDTO.creditCode" maxlength="30" show-word-limit/></td>
            </tr>
            <tr>
              <td class="table_td"><span class="td_check_red">*</span>字号名称/摊位号厂房名称</td>
              <td class="table_td"><el-input placeholder="字号名称/摊位号厂房名称" v-model="dataForm.companyDTO.plantName" maxlength="40" show-word-limit/></td>

              <td class="table_td"><span class="td_check_red">*</span>营业执照编号</td>
              <td class="table_td"><el-input placeholder="营业执照编号" v-model="dataForm.companyDTO.businessLicenseNo" maxlength="30" show-word-limit/></td>
            </tr>
            <tr>
              <td class="table_td"><span class="td_check_red">*</span>营业执照注册日期</td>
              <td class="table_td">
                <el-date-picker
                  class="date_item"
                  v-model="dataForm.companyDTO.businessLicenseStartTime"
                  type="date"
                  placeholder="选择营业执照注册日期"
                  align="right"
                  style="width:100%;"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </td>
              <td class="table_td">
                  <span class="td_check_red">*</span>营业执照到期日
              </td>
              <td class="table_td">
                <el-date-picker
                  class="date_item"
                  v-model="dataForm.companyDTO.businessLicenseEndTime"
                  type="date"
                  placeholder="选择营业执照到期日"
                  align="right"
                  style="width:100%;"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </td>
            </tr>
            <tr>
              <td class="table_td"><span class="td_check_red">*</span>经营地址</td>
              <td class="table_td">
                <el-cascader
                    v-model="companyAreaCodes"
                    :options="regionList"
                    clearable
                    placeholder="请选择经营地址"
                    :props="{ expandTrigger: 'hover' }"
                    style="width:100%;"
                ></el-cascader>
              </td>

              <td class="table_td"><span class="td_check_red">*</span>详细地址</td>
              <td class="table_td"><el-input placeholder="详细地址"  v-model="dataForm.companyDTO.addressDetail"  maxlength="30" show-word-limit/></td>
            </tr>
            <tr>
              <td class="table_td">
                  <span class="td_check_red">*</span>实际经营人是否为本人
              </td>
              <td class="table_td">
                <el-select v-model="dataForm.companyDTO.actualOperatorIsMe" placeholder="请选择" style="width:100%;">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </td>
              <td class="table_td">
                  <span class="td_check_red">*</span>实际经营人
              </td>
              <td class="table_td">
                  <el-input placeholder="实际经营人"  v-model="dataForm.companyDTO.actualOperator" maxlength="10" show-word-limit/>
              </td>
            </tr>
            <tr>
              <td class="table_td">
                  <span class="td_check_red">*</span>企业角色
              </td>
              <td class="table_td">
                <DicSelect dictType="企业角色(信用贷)" :dictValue="dataForm.companyDTO.companyRole" v-on:dictValue="dataForm.companyDTO.companyRole = $event"/>
              </td>
              <td class="table_td">
                  <span class="td_check_red">*</span>企业证件类型
              </td>
              <td class="table_td">
                <el-select v-model="dataForm.companyDTO.companyCardType" placeholder="请选择" style="width:100%;">
                  <el-option  label="营业执照" :value="1"></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="table_td">
                  <span class="td_check_red">*</span>企业证件号码
              </td>
              <td class="table_td">
                <el-input placeholder="企业证件号码" v-model="dataForm.companyDTO.companyCardNo" maxlength="30" show-word-limit/>
              </td>
              <td class="table_td">
                  <span class="td_check_red">*</span>经营贷款类型
              </td>
              <td class="table_td">
                <el-select v-model="dataForm.companyDTO.operatLoanType" placeholder="请选择" style="width:100%;">
                  <el-option  label="信用贷款" :value="1"></el-option>
                </el-select>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
<!--第三个表格-->
        <el-form :model="formData3"  ref="formData3">
          <div class="table_title td_color">联系人信息</el-button><el-button class="add_left"  type="text" v-if="formData3.powerAttrList.length < 5" @click="addRow()">添加</el-button></div>
          <table class="table_wrap">
            <tbody>
              <tr v-for="(item,index) in formData3.powerAttrList" :key="item.key"  >
                <td class="table_td" style="text-align:left;padding-left:5px;">
                   联系人{{index+1}}
                   <el-button class="add_left" v-if="index > 0" type="text"  @click="removeRow(index,item.id)">删除</el-button>
                </td>
                <td class="table_td"><span class="td_check_red">*</span>姓名</td>
                <td class="table_td"><el-input placeholder="姓名" v-model="item.realName" maxlength="10" show-word-limit/></td>
                <td class="table_td">
                    <span class="td_check_red">*</span>电话
                </td>
                <td class="table_td">
                    <el-input  placeholder="电话"  v-model="item.mobile"/>
                </td>
                <td class="table_td">
                    <span class="td_check_red">*</span>证件号码
                </td>
                <td class="table_td">
                    <el-input  placeholder="证件号码"  v-model="item.idCardNo"/>
                </td>
              </tr>
            </tbody>
          </table>
        </el-form>
        <div style="width:20%;margin:0 auto;margin-top:30px;" >
            <el-button type="warning" @click="editCustomer" style="width:120px;height:40px;" :disabled="addDisabled" v-if="isTaskProcessing != undefined && isTaskProcessing == true" v-permission="'system:credit-loan-customer-info-save:access'">保存</el-button>
            <el-button type="warning" @click="createCustomer" style="width:120px;height:40px;" :disabled="addDisabled" v-if="isProjectSubmit">下一步</el-button>
<!--            <el-button type="warning" @click="editCustomer" style="width:120px;height:40px;" :disabled="addDisabled" v-else v-permission="'system:credit-loan-customer-info-save:access'">保存</el-button>-->
        </div>
      </div>
    </div>

</template>

<script>
import { createCustomer,createCustomerDraft,selectCustomer,deleteCreditLoan,creditExistIdCardNoCheck,editCustomer} from '@/api/customer'
import { queryCapitalChoose} from '@/api/product'
import { queryCapitalOrg} from '@/api/capital'
import { listRegion, detailByAreaId } from '@/api/region'

import DicSelect from '@/components/select'
  export default {
    components: { DicSelect },
    props:{
      isTaskProcessing: undefined,
      isProjectSubmit: undefined,
      projectId: undefined,
      changeValue: undefined,
      operationLook: undefined,
      projectStatus: undefined
    },
    data () {
      return {
         defaultChangeValue: this.changeValue,
         dataForm:{
           loanInfoVo:{},
           borrowerVo:{},
           clientFamliyDTOS:[],
           companyDTO:{}
         },
         defaultProjectId: undefined,
         capitalList:[],
         capitalId: undefined,
         chooseList:[],
         regionList: [],
        companyAreaCodes: [],
         famliyRegionCodes:[],
         loading: false,
         formData3: {
           powerAttrList: [
            {
              realName: "",
              idCardNo: "",
              mobile: "",
              key: Date.now() // 更改前没有
            },
          ],
        },
        idCardDisabled: false,
        addDisabled: true,
      }
    },
    created(){
        this.defaultProjectId = this.$route.query.projectId
        if (this.defaultProjectId === undefined){
          this.defaultProjectId = localStorage.getItem('projectId');
        }
        if(this.defaultProjectId != undefined) {
          this.idCardDisabled = true;
          this.addDisabled = false;
          this.findCsutomer()
        }
        this.findCapitalList()
        this.getRegionList()
    },
    methods: {
      addRow() {
        this.formData3.powerAttrList.push({
          realName: "",
          idCardNo: "",
          mobile: "",
          key: Date.now() // 更改前没有
        });
      },

      creditExistIdCardNoCheck(val) {
        this.loading = true;
        creditExistIdCardNoCheck(this.dataForm.borrowerVo.idCardNo).then(response => {
          this.loading = false;
          this.addDisabled = false;
          if (response.data != undefined){
            response.data.id = undefined;
            var data = response.data;
            this.dataForm.borrowerVo = data
            if (data.clientFamliys != undefined){
              this.formData3.powerAttrList = data.clientFamliys
            }
            //户籍地址
            if(data.famliyRegionCodeArr != undefined && data.famliyRegionCodeArr.length > 0){
              this.famliyRegionCodes = []
              data.famliyRegionCodeArr.forEach((item,index,arr)=> {
                this.famliyRegionCodes.push(item.areaCode);
              })
            }
            //经营地址
            if (data.companyInfo != undefined){
              this.dataForm.companyDTO = data.companyInfo
              if(data.companyInfo.companyAreaCodeArr != undefined && data.companyInfo.companyAreaCodeArr.length > 0){
                this.companyAreaCodes = []
                data.companyInfo.companyAreaCodeArr.forEach((item,index,arr)=> {
                  this.companyAreaCodes.push(item.areaCode);
                })
              }
            }
          }
        }).catch(() => {
          this.loading = false;
          this.addDisabled = true;
        });
      },

      // 删除属性列
      removeRow(index,id) {
        this.formData3.powerAttrList.splice(index, 1);
        if(id != undefined) {
        deleteCreditLoan({stepNameEnum: "CONTRACT",id:id})
          .then(response => {
          })
          .catch(() => {
          })
        }
      this.$notify.success({
        title: '成功',
        message: '删除成功'
        })
      },

      findCsutomer() {
        selectCustomer({projectId: this.defaultProjectId}).then(response => {
            if(response.data != undefined ) {
              this.dataForm = response.data
              this.formData3.powerAttrList  = this.dataForm.clientFamliyDTOS
              //经营地址
              if(this.dataForm.companyDTO.companyAreaCodeArr != undefined && this.dataForm.companyDTO.companyAreaCodeArr.length > 0){
                this.companyAreaCodes = []
                this.dataForm.companyDTO.companyAreaCodeArr.forEach((item,index,arr)=> {
                  this.companyAreaCodes.push(item.areaCode);
                })
              }
              //户籍地址
              if(this.dataForm.borrowerVo.famliyRegionCodeArr != undefined && this.dataForm.borrowerVo.famliyRegionCodeArr.length > 0){
                this.famliyRegionCodes = []
                this.dataForm.borrowerVo.famliyRegionCodeArr.forEach((item,index,arr)=> {
                  this.famliyRegionCodes.push(item.areaCode);
                })
              }
              //级联产品名称
              this.capitalId = this.dataForm.loanInfoVo.capitalId
              this.findCapitalChoose()
            }
          }).catch(() => {})
      },
      findCapitalList() {
        queryCapitalOrg()
          .then(response => {
            if(response.data != undefined ) {
              this.capitalList = response.data
            }
          })
          .catch(() => {
            this.capitalList = []
          })
      },

      findCapitalChoose() {
        queryCapitalChoose({capitalId: this.capitalId,productType: 2})
          .then(response => {if(response.data != undefined ) {
              this.chooseList = response.data
            }
          }).catch(() => {
            this.chooseList = []
          })
      },
      getRegionList() {
        listRegion()
          .then(response => {
            if (response.data != undefined) {
              this.regionList = response.data;
            }
          })
          .catch(() => {});
      },
      capitalChangeHandle(row){
          console.log(this.dataForm.loanInfoVo.capitalSource)
          if (this.dataForm.loanInfoVo.capitalSource != undefined){
            this.dataForm.loanInfoVo.capitalSource = undefined;
          }
          this.dataForm.loanInfoVo.annualInterestRate = undefined;
          this.chooseList = []
          // console.log(row)
          this.capitalId = row
          this.findCapitalChoose()
          return false;
      },
      capitalSourceChangeHandle(row){
        console.log(row)
        let item = this.chooseList.filter(item=>item.id === row)
        this.dataForm.loanInfoVo.annualInterestRate = item[0].oneBetRate
        console.log(item)
        return false;
      },
      createCustomer(){
            this.dataForm.clientFamliyDTOS = this.formData3.powerAttrList
            if(this.famliyRegionCodes != undefined && this.famliyRegionCodes.length>0){
              this.dataForm.borrowerVo.famliyRegionCode = this.famliyRegionCodes[this.famliyRegionCodes.length-1]
            }
            if(this.famliyRegionCodes != undefined && this.famliyRegionCodes.length>0){
              this.dataForm.companyDTO.companyAreaCode = this.companyAreaCodes[this.companyAreaCodes.length-1]
            }
            this.$confirm('请仔细核对身份证号，一旦提交便不可修改, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              createCustomer(this.dataForm).then(response => {
                console.log(response.data)
                localStorage.setItem("projectId",response.data.id)
                this.$notify.success({title: '成功',message: '保存成功'})
                //跳转到下个页面
                if( this.defaultChangeValue != 'detail' ) {
                  this.$emit("stepChanged",2)
                }
              })
            }).catch(() => {
              this.$message({type: 'info',message: '已取消'});
            });
      },

      editCustomer(){
            this.dataForm.clientFamliyDTOS = this.formData3.powerAttrList
            if(this.famliyRegionCodes != undefined && this.famliyRegionCodes.length>0){
              this.dataForm.borrowerVo.famliyRegionCode = this.famliyRegionCodes[this.famliyRegionCodes.length-1]
            }
            if(this.famliyRegionCodes != undefined && this.famliyRegionCodes.length>0){
              this.dataForm.companyDTO.companyAreaCode = this.companyAreaCodes[this.companyAreaCodes.length-1]
            }
        editCustomer(this.dataForm).then(response => {
              this.$notify.success({title: '成功',message: '保存成功'})
            })
      },
      updateData(){
         if( this.defaultChangeValue != 'detail' ) {
            this.$emit("stepChanged",2)
          }
      },
    },
  }
</script>

<style>
.table .el-input.is-disabled .el-input__inner {
  background: #fff;
  color:#606266;
  border-color:#fff;
  cursor: default;
}
.table .el-input__inner{
  height:52px;
  line-height: 55px;
  border:0px solid;
}

.table .el-input-group__append{
  border:0px solid;
}

.table {
  background-color: #FFFFFF;
  font-size: 14px;
  width: 95%;
  margin:0 auto;
}
.table tr{
  border:0px solid;

}
.table_title{
  background-color: #F2F2F2;
  border-top: 0px solid #c7c7c7;
  border-right: 0px solid #c7c7c7;
  border-left: 0px solid #c7c7c7;
  width: 100%;
  padding-left: 20px;
  line-height: 50px;
}
.table_wrap{
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
}

.table_td {
  text-align: center;
  line-height: 50px;
  min-width: 90px;
  border: 1px solid #c7c7c7;
}
.td_check_red{
  color: red;
}
.td_color{
  background-color: #f4f4f4;
}

</style>
